<!-- eslint-disable vue/no-v-html -->
<template>
    <div :style="dynamicStyles">{{ propValue.time }}</div>
</template>

<script>
import { mapState } from 'vuex'
import OnEvent from '../common/OnEvent'

export default {
    extends: OnEvent,
    props: {
        propValue: {
            type: Object,
            required: true,
            default: {},
        },
        element: {
            type: Object,
            default: () => { },
        },
    },
    data() {
        return {
            canEdit: false,
            ctrlKey: 17,
            isCtrlDown: false,
            cancelRequest: null,
            dynamicStyles: {
                width: '0px',
                height: '0px',
                borderRadius: '0px',
                fontSize: "0"
            }
        }
    },
    computed: {
        ...mapState([
            'editMode',
            'curComponent',
        ]),
    },
    created() {
        this.getTime()
    },
    watch: {
        'element.style.width': function () {
            const { width, height } = this.element.style
            this.dynamicStyles.width = width + "px"
            this.dynamicStyles.height = height + 'px'
            this.dynamicStyles.borderRadius = this.propValue.border + 'px'
        },
        'element.style.height': function () {
            const { width, height } = this.element.style
            this.dynamicStyles.width = width + "px"
            this.dynamicStyles.height = height + 'px'
            this.dynamicStyles.borderRadius = this.propValue.border + 'px'
        },
        "propValue.fontSize": function () {
            this.dynamicStyles.fontSize = this.propValue.fontSize + 'px'
        },
    },
    mounted() {
        const { width, height } = this.element.style
        this.dynamicStyles.width = width + "px"
        this.dynamicStyles.height = height + 'px'
        this.dynamicStyles.fontSize = this.propValue.fontSize + 'px'
        var that = this
        setInterval(function () {
            that.getTime()
        }, 1000);
    },
    methods: {
        getTime() {
            const currentTime = new Date();
            const hours = String(currentTime.getHours()).padStart(2, '0');
            const minutes = String(currentTime.getMinutes()).padStart(2, '0');
            const seconds = String(currentTime.getSeconds()).padStart(2, '0');
            this.propValue.time = hours + ":" + minutes + ":" + seconds;

        }
    },
}
</script>

<style lang="scss" scoped>
.v-text {
    width: 100%;
    height: 100%;
    display: table;

    div {
        display: table-cell;
        width: 100%;
        height: 100%;
        outline: none;
        word-break: break-all;
        padding: 4px;
    }

    .can-edit {
        cursor: text;
        height: 100%;
    }
}

.preview {
    user-select: none;
}
</style>
